<template>
  <div class="yxp-report">
    <img src="@/assets/word/report.png" class="report-img"/>
    <div class="yxp-report-list">
      <div class="accuracy" v-if="is_doubleminus == 0 || type == 0">
        <h3 class="num">{{reportInfo.accuracy === 0 ? 0 : reportInfo.accuracy + '%'}}</h3>
        <p class="text">正确率</p>
      </div>
      <div v-else><p class="text font-20">恭喜您完成本轮学习</p></div>
      <div class="know-box" v-if="is_doubleminus == 0 || type == 0">
        <div class="know-box-item">
          <p class="text">已识记</p>
          <p class="num"><em>{{reportInfo.all_num}}</em>个</p>
        </div>
        <div class="know-box-item">
          <p class="text">生词</p>
          <p class="num"><em>{{reportInfo.err_num}}</em>个</p>
        </div>
        <!-- <div class="know-box-item">
          <p class="text">学习时长</p>
          <p class="num"><em>{{(reportInfo.time / 60).toFixed(2)}}</em>分钟</p>
        </div> -->
      </div>
      <div class="know-box" v-else>
        <div class="know-box-item">
          <p class="text">共学习</p>
          <p class="num"><em>{{content.all}}</em>个</p>
        </div>
        <div class="know-box-item">
          <p class="text">一眼会</p>
          <p class="num"><em>{{content.easy}}</em>个</p>
        </div>
        <div class="know-box-item">
          <p class="text">难词</p>
          <p class="num"><em>{{content.dont}}</em></p>
        </div>
      </div>
      <div class="study-money" v-if="is_doubleminus == 0 || type == 0">
        <div class="study-money-item">
          <img src="@/assets/word/start-icon.png" />+{{reportInfo.credit}}学分
        </div>
        <div class="study-money-item">
          <img src="@/assets/word/money-icon.png" />+{{reportInfo.diamond}}易学币
        </div>
      </div>
      <div class="btn" id="yxp-report-btn" @click="handleBack">继续学习</div>
      <Timetips ref="timetips"></Timetips>
    </div>
  </div>
</template>
<script>
import { getReport } from '@/services/word.js'
import Timetips from "@/components/Timetips";
export default {
  name: 'wordReport',
  components: {
    Timetips
  },
  data() {
    return {
      reportInfo: {},
      content:{
        'all':0,
        'easy':0,
        'dont':0
      },
      type:0,
      is_finish:0,
      is_doubleminus:sessionStorage.getItem('doubleminus_type')
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.type = this.$route.query.type;
      this.content = this.$route.query.content;
      this.is_finish = this.$route.query.is_finish;
      console.log('-----------------------------',this.is_finish);
      console.log('-----------------------------',this.type);
      if(this.is_finish == 0) {
        this.$loading.show()
        let data = await getReport({id: this.$route.query.id})
        if (data.code === 1) {
          this.$loading.hide()
          this.reportInfo = data.data
        } else if (data.code === '10001' || data.code === 10001) {
          this.$loading.hide()
          this.$toast('token过期，请重新登录')
        } else {
          this.$loading.hide()
          this.$toast(data.info)
        }
      }
    },
    handleBack () {
      this.$router.push({
        path: '/wordRemember'
      })
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang="less" scoped>
@media screen and (max-width: 1200px) {
  .yxp-report {
    .report-img {
      width: 364px;
      height: 386px;
      margin-right: 90px;
    }
    &-list {
      .accuracy {
        .num {
          font-size: 90px;
        }
        .text {
          font-size: 17px;
        }
      }
      .know-box {
        width: 344px;
        height: 81px;
        margin-top: 30px;
        &-item {
          .text {
            font-size: 12px;
          }
          .num {
            font-size: 9px;
            em {
              font-size: 23px;
            }
          }
          &:nth-child(2) {
            &::before {
              top: calc((100% - 41px) / 2);
              height: 41px;
            }
            &::after {
              top: calc((100% - 41px) / 2);
              height: 41px;
            }
          }
        }
      }
      .study-money {
        margin-top: 15px;
        &-item {
          font-size: 14px;
          img {
            width: 23px;
            height: 23px;
          }
          &:first-child {
            margin-right: 30px;
          }
        }
      }
      .btn {
        width: 153px;
        height: 46px;
        line-height: 46px;
        font-size: 14px;
        margin: 48px auto 0;
      }
    }
  }
}
@media screen and (min-width: 1200px) {
  .yxp-report {
    .report-img {
      width: 476px;
      height: 505px;
      margin-right: 172px;
    }
    &-list {
      .accuracy {
        .num {
          font-size: 120px;
        }
        .text {
          font-size: 24px;
        }
      }
      .know-box {
        width: 450px;
        height: 107px;
        margin-top: 58px;
        &-item {
          .text {
            font-size: 16px;
          }
          .num {
            font-size: 14px;
            em {
              font-size: 30px;
            }
          }
          &:nth-child(2) {
            &::before {
              top: calc((100% - 53px) / 2);
              height: 53px;
            }
            &::after {
              top: calc((100% - 53px) / 2);
              height: 53px;
            }
          }
        }
      }
      .study-money {
        margin-top: 25px;
        &-item {
          font-size: 20px;
          img {
            width: 30px;
            height: 30px;
          }
        }
      }
      .btn {
        width: 200px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        margin: 80px auto 0;
      }
    }
  }
}
.font-20{
  font-size: 20px!important;
}
.yxp-report {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #EFF7F5 url('../../../assets/word/report-bg.png') no-repeat center/100% 100%;
  &-list {
    .accuracy {
      .num {
        font-family: Klavika;
        font-weight: 500;
        line-height: 120px;
        color: #27BFA3;
      }
      .text {
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000;
      }
    }
    .know-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      background: #fff;
      border-radius: 12px;
      &-item {
        position: relative;
        flex: 1;
        .text {
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000;
        }
        .num {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #27BFA3;
          em {
            font-weight:  500;
          }
        }
        &:last-child {
          border: none;
        }
        &:nth-child(2) {
          &::before {
            position: absolute;
            left:0;
            display: block;
            content:'';
            width: 1px;
            background: #DEEAE7;
          }
          &::after {
            position: absolute;
            right:0;
            display: block;
            content:'';
            width: 1px;
            background: #DEEAE7;
          }
        }
      }
    }
    .study-money {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 25px;
      &-item {
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #43675E;
        img {
          display: inline-block;
          vertical-align: middle;
        }
        &:first-child {
          margin-right: 35px;
        }
      }
    }
    .btn {
      text-align: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #fff;
      background: linear-gradient(360deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow: 0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 35px;
      cursor: pointer;
      &:hover {
        background:linear-gradient(360deg,rgba(39,178,152,1) 0%,rgba(52,203,163,1) 100%);
        box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      }
    }
  }
}
</style>
